<template>
    <div class="container">
        <div class="headerBox">
            <h1>抚州基地焊装工厂数据分析</h1>
        </div>
        <div class="contentBox">
            <div class="contentLeft">
                <div class="leftTop">
                    <div class="title">
                        车间生产情况分析
                    </div>
                    <workshopproductionanalysis></workshopproductionanalysis>
                </div>
                <div class="leftCenter">
                    <div class="title">
                        九月第三周效率指标总览
                    </div>
                    <div class="centent">
                        <div class="leftCenter_left">
                            <hpv></hpv>
                        </div>
                        <div class="leftCenter_right">
                            <opr></opr>
                        </div>
                    </div>
                </div>
                <div class="leftBottom">
                    <div class="title">
                        HPV超出工时
                    </div>
                    <hpvtimeout></hpvtimeout>
                </div>
            </div>

            <div class="contentCenter">
                <div class="centerTop">
                    <div class="title">
                        焊装月生产数据分析
                    </div>
                    <weldingmonthproductiondata></weldingmonthproductiondata>
                </div>
                <div class="centerCenter">
                    <div class="title">
                        HPV趋势监控
                    </div>
                    <hpvtrend></hpvtrend>
                </div>
                <div class="centerBottom">
                    <div class="title">
                        OPR趋势监控
                    </div>
                    <oprtrend></oprtrend>
                </div>
            </div>

            <div class="contentRight">
                <div class="rightTop">
                    <div class="title">
                        焊装车间品质分析<span> / </span>
                        <span v-if="1 === 1">品质问题数</span>
                        <span v-else-if="1 === 2">直通率</span>
                        <span v-else>入库100</span>
                    </div>
                    <qualityanalysis></qualityanalysis>
                </div>
                <div class="rightCenter">
                    <div class="title">
                        HPV标准配员vS实际出勤人员
                    </div>
                    <hpvpersonnel></hpvpersonnel>
                </div>
                <div class="rightBottom">
                    <div class="title">
                        OPR损失柏拉图分析
                    </div>
                    <oprloss></oprloss>
                </div>
            </div>
        </div>

    </div>
</template>
<script>

import * as echarts from "echarts";

import hpv from "./components/hpv";
import opr from "./components/opr";
import workshopproductionanalysis from "./components/workshopproductionanalysis";
import hpvtimeout from "./components/hpv_timeout";
import hpvtrend from "./components/hpv_trend";
import oprtrend from "./components/opr_trend";
import qualityanalysis from "./components/quality_analysis";
import hpvpersonnel from "./components/hpv_personnel";
import oprloss from "./components/opr_loss";
import weldingmonthproductiondata from "./components/weldingmonthproductiondata";

export default {
    components: {
        hpv,
        opr,
        workshopproductionanalysis,
        hpvtimeout,
        hpvtrend,
        oprtrend,
        qualityanalysis,
        hpvpersonnel,
        oprloss,
        weldingmonthproductiondata
    },
    data() {
        return {};
    },
    mounted() {
    },
    methods: {
    }
}

</script>
<style scoped>
@import '../../style/font.css';

.container {
    width: 100vw;
    height: 100vh;
    background: url('../../assets/fuzhouhanzhuang/bg.png') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    font-family: "heiti";
}

.headerBox {
    height: calc(100vh * 96 / 1080);
    background: url('../../assets/fuzhouhanzhuang/header.png');
}

.headerBox h1 {
    font-size: 2.25rem;
    color: #FFFFFF;
    padding-top: .9375rem;
    text-align: center;
}

.contentBox {
    display: flex;
    justify-content: space-between;
}

.contentLeft,
.contentRight {
    width: 31%;
}


.leftTop,
.leftBottom,
.leftCenter {
    background: url("../../assets/fuzhouhanzhuang/box1.png");
    background-size: 100% 100%;
    width: calc(100vw * 575 / 1920);
    height: calc(100vh * 295 / 1080);
    margin-top: 4%;
    margin-left: 5%;
}

.leftCenter .centent {
    width: 100%;
    height: calc(100% - 41.5px);
    overflow: hidden;
    display: inline-block;
}


.rightTop,
.rightBottom,
.rightCenter {
    background: url("../../assets/fuzhouhanzhuang/box1.png");
    background-size: 100% 100%;
    width: calc(100vw * 575 / 1920);
    height: calc(100vh * 295 / 1080);
    margin-top: 4%;
    margin-left: -2%;
}

.contentCenter {
    margin-left: 2%;
    margin-right: 2%;
}

.centerTop {
    background: url("../../assets/fuzhouhanzhuang/box.png");
    background-size: 100% 100%;
    width: calc(100vw * 575 / 1920);
    height: calc(100vh * 295 / 1080);
    margin-top: 4%;
}

.centerCenter {
    background: url("../../assets/fuzhouhanzhuang/box.png");
    background-size: 100% 100%;
    width: calc(100vw * 575 / 1920);
    height: calc(100vh * 295 / 1080);
    margin-top: 4.1%;
}

.centerBottom {
    background: url("../../assets/fuzhouhanzhuang/box.png");
    background-size: 100% 100%;
    width: calc(100vw * 575 / 1920);
    height: calc(100vh * 295 / 1080);
    margin-top: 4.2%;
}

.title {
    color: rgb(255, 255, 255);
    font-size: calc(100vw * 24 / 1920);
    font-weight: 400;
    padding: 1% 4% 0;
}

.title span {
    font-size: calc(100vw * 18 / 1920);
}



.leftCenter_left {
    float: left;
    margin-top: .3125rem;
    width: 50%;
    height: calc(100% - 10px);
}

.leftCenter_right {
    float: left;
    margin-top: .3125rem;
    width: 50%;
    height: calc(100% - 10px);
}
</style>